<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>CHỌN NHÀ HÀNG</title>
<link rel="stylesheet" href="../../css/bootstrap/bootstrap.css"
	th:href="@{/css/bootstrap/bootstrap.css}" />
<script src="../../js/jquery-1.11.2.js" th:src="@{/js/jquery-1.11.2.js}"></script>
<script charset="UTF-8" src="../../js/client.js"
	th:src="@{/js/client.js}"></script>
</head>
<body>
<header></header>
	<nav class="navbar navbar-default col-md-offset-1 col-md-10 container" style="background-color: red;">
		<div class="container-fluid">
			<ul class="nav navbar-nav">
				<li><a href="#">1. Chọn khu vực</a></li>
				<li><a href="#" style="color: yellow;">2. Chọn nhà hàng</a></li>
				<li><a href="#">3. Chọn thức ăn</a></li>
				<li><a href="#">4. Xác nhận đơn hàng</a></li>
			</ul>
		</div>
	</nav>
	<section>
		<article class="col-md-offset-1 col-md-10">
			<div class="row">
				<div class="col-md-3">
					<div class="panel panel-default"
						style="border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px;">
						<div class="panel-heading"
							style="background-color: #DC143C; border-top-left-radius: 15px; border-top-right-radius: 15px;">
							<div class="panel-title" style="font-size: 24px; line-height: 24px;color: #FFF;">Chọn Lựa Món</div>
						</div>
						<div class="panel-body">
							<div th:each="category : ${categoryList.entrySet()}"
								style="margin-bottom: 10px; border-bottom: 1px solid black;">
								<input th:value="${category.key}" th:text="${category.value}"
									type="checkbox" />
							</div>
							<p><span style="font-size: 23px;color: red">Xếp theo</span></p>
							<div>
								<select style="width: 150px; height: 23px;">
									<option>Alphabet</option>
									<option>Phí Giao Hàng</option>
									<option>Thời Gian Tạo</option>
								</select>
							 </div>
						</div>
					</div>
				</div>
				<div class="col-md-9">
					<div class="panel panel-default">
						<div class="panel-heading">
							<div class="panel-title">
								<p style="border-bottom:1px dashed yellow;">Khu vực: <span th:text="${area.cityName}"></span>, <span th:text="${area.districtName}"></span></p>
								<p>Hiện có <span th:text="${size}"></span> nhà hàng giao tới chổ của bạn</p>
							</div>
						</div>
						<div class="panel-body">
							<table class="table table-hover">
								<thead>
									<tr>
									<th>Nhà hàng</th>
									<th>Địa chỉ và thời gian</th>
									<th>Đánh Giá</th>
									<th>Phí giao hàng</th>
									<th>Đặt tối thiểu</th>
									</tr>
								</thead>
								<tbody>
									<tr th:each="res : ${list}">
										<td>
											<h5 th:text="${res.restaurantName}"></h5>
											<a th:href="@{/client/choose-food(restaurantId=${res.restaurantId})}"><img th:src="${res.restaurantImage}"/></a>
											<h5 th:text="${res.restaurantTitle}"></h5>
										</td>
										<td>
											<h5 th:text="${res.wardName}"></h5>
											<h5 th:text="${res.districtName}"></h5>
											<h5 th:text="${res.openTime}"></h5>
											<h5 th:text="${res.closeTime}"></h5>
										</td>
										<td></td>
										<td th:text="${res.deliveryPrice}"></td>
										<td th:text="${res.minOrder}"></td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</article>
	</section>
	<footer class="container col-sm-12" style="margin-top: 50px;">
		<ol class="breadcrumb text-center">
			<li class="active"><p>@2015 orderonline.com - ĐẶT THỨC ĂN TRỰC TUYẾN, một phần của <strong>Takeaway.com</strong></p></li>
		</ol>
	</footer>
</body>
</html>